<template>
    <div>
         <h1>餐&nbsp;厅&nbsp;后&nbsp;台&nbsp;管&nbsp;理&nbsp;系&nbsp;统</h1>
        <h1>登录</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

               
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="userPsd" >
                    <el-input type="password" v-model="ruleForm.userPsd"  placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item label="身份" prop="identity">
                    <el-radio-group v-model="ruleForm.identity" >
                        <el-radio label="2">商家</el-radio>
                        <el-radio label="3">管理员</el-radio>
                   
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" >登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
                <p>没有账号？<u @click="zc">点击注册</u></p>
            </el-form>
            
    </div>
</template>

<script>
import axios from 'axios';
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
    name: "LoginCode",
    computed: {  
        ...mapState(['user']), // 映射 this.user 到 this.$store.state.user  
    }, 
    data() {
        
        return {
            ruleForm: {
                userName: '',
                userPsd: '',
                identity: '2'
            },
            rules: {
                userName: [
                    {  required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                userPsd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        };
    },

    methods: {
        ...mapMutations(['SET_USER']), // 映射 this.SET_USER 到 this.$store.commit('SET_USER')  
        ...mapActions(['setUser']), // 映射 this.setUser 到 this.$store.dispatch('setUser')  
        //提交
       submitForm(formName) {
           //可以在这个位置添加loadding
        this.$refs[formName].validate((valid) => {
            if(valid) {
                let user = this.ruleForm.userName;
                let role = this.ruleForm.identity;
                // console.log(user,role)
                //post请求
                axios({
                    method: "post",
                    url: "/login",
                    data: {
                        userName: user,
                        userPsd: this.ruleForm.userPsd,
                        identity: role
                    }

                }).then(res => {
                    console.log(res.data.code);
                    if(res.data.code == 200) {
                        //取数据
                        let getlocal = localStorage.getItem("localUser");
                        if (getlocal != "") {
                            localStorage.removeItem("localUser");
                        } 
                        
                        let localUser = {
                            user,
                            role,
                            user_id: res.data.user_id
                        }
                        this.setUser(localUser); // 调用 action 来设置用户信息  
                        localStorage.setItem("localUser", JSON.stringify(localUser));
                        location.href = "/";
                    } else if (res.data.code == 401 || res.data.code == 402) {
                        //密码错误
                        this.$message({
                            showClose: true,
                            message: '账号或密码错误',
                            type: 'warning'
                        });
                    } else if (res.data.code == 403) {
                        this.$message({
                            showClose: true,
                            message: '该账户已冻结，请联系管理员',
                            type: 'warning'
                        });
                    } else {
                        //用户不存在
                        this.$message.error('用户不存在');
                    }
                    
                }).catch(err => {
                
                    this.$message.error(err);
                    
                })
            }
            


        })
          
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      zc() {
          this.$router.push("/sign");
      
      }

    },
}
</script>

<style lang="less" scoped>
h1 {
    padding-bottom: 40px;
    font-weight: 25px;
    text-align: center;
    color: #3170a7;
    opacity: 0.5;
}

p {
    font-size: 12px;
    text-align: right;
    color: #409EFF;
    u {
        cursor: pointer;
    }
}


</style>